<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="../jquery-3.1.1.js"></script>
    <title></title>
    <style>
        form {
            width: 300px;
            margin: 0 auto;
        }
        
        div {
            width: 100%;
        }
        
        .len {
            display: inline-block;
            width: 32px;
            height: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <form action="">
        <div><span>已输入</span><span class="len"></span><span>个字</span></div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
</body>

</html>
<script>
    $(function () {
        $('textarea').keyup(function () {
            var content = $(this).val();
            var len = $(this).val().length;
            if(len>0 && len<300){
                $('.len').html(len);
            }else{
                $('.len').css('color','orange');
                $('.len').html(len);
            }
            // var count = 0
            // $(this).each(function () {
            //     if (content.charCodeAt() > 255) {
            //         count++;
            //     } else {
            //         count += 0.5;
            //     }
            //     $('.len').html(count);
            // })
            // $('.len').html(count);
        })
    })

</script>